
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<script src="scripts/MSClass.js" type="text/javascript"></script>

<TITLE>图片、标题、描述、页码切换实例 JavaScript - MSClass应用实例演示 - Class Of Marquee Scroll通用不间断滚动JS封装类</TITLE>
<meta name="keywords" content="JavaScript图片、标题、描述、页码切换实例,MSClass,不间断滚动,JS不间断滚动,通用不间断滚动,Class Of Marquee Scroll">
<META NAME="description" CONTENT="JavaScript图片、标题、描述、页码切换实例,MSClass,不间断滚动,JS不间断滚动,通用不间断滚动,Class Of Marquee Scroll">
<META content="MSHTML 6.00.6000.17097" name=GENERATOR></HEAD>
<body>
<script type="text/javascript">
function $(id){return document.getElementById(id)};
</script>

<h1>图片、标题、描述、页码切换实例 JavaScript - MSClass应用实例演示 <a href="MSClass.html">下载MSClass</a></h1>
<br/><br/>
<style>
img{border:0}
</style>
<style type="text/css" media="screen">
.hot_slider{padding:0px;width:330px;border:1px solid #000000;}
.slider_wrap{position:relative;width:322px;height:260px;margin:4px;}
#slider_box{position:relative;width:320px;height:260px;overflow:hidden;float:left;}
#contentList li{float:left;position:relative;}
#contentList li IMG{width:320px;height:260px;}
#previewList{position:absolute;bottom:13px;right:5px;}
#previewList li{list-style:none;float:left;width:16px;height:14px;FILTER:alpha(opacity=80);opacity:0.8;border:1px solid #D00000;background-color:#FFFFFF;color:#D00000;text-align:center;cursor:pointer;margin-right:2px;padding-top:0px;overflow:hidden;}
#previewList li:hover,#previewList li.active{border:1px solid #D00000;background-color:#FF0000;color:#FFFFFF;width:16px;height:14px;font-weight:bold;font-size:13px;}
</style>
<body>
<div class="hot_slider"> 
	<div class="slider_wrap"> 
		<div id="slider_box"> 
			<ul id="contentList"> 
				<li>
					<a href="javascript:void(0)"><img src="images/banner2.jpg" alt="" /></a>
				</li>
				<li>
					<a href="javascript:void(0)"><img src="images/case_studies.jpg" alt="" /></a>
				</li>
				<li>
					<a href="javascript:void(0)"><img src="images/contactus.jpg" alt="" /></a>
				</li>
				<li>
					<a href="javascript:void(0)"><img src="images/news.jpg" alt="" /></a>
				</li>
			</ul> 
		</div>
		<ul id="previewList"> 
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul> 
	</div> 
</div>
<script type="text/javascript">
new Marquee(
{
	MSClass	  : ["slider_box","contentList","previewList"],
	Direction : 2,
	Step	  : 0.3,
	Width	  : 320,
	Height	  : 260,
	Timer	  : 20,
	DelayTime : 2500,
	AutoStart : true
});
</script>
</body>
</html>